<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;
use yii\bootstrap\Button;
use yii\bootstrap\Alert;

$this->title = 'Alert Widget Yii-Bootstrap警告框使用教程和样式展示';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'alert,Yii,bootstrap3,widget,使用教程,演示'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii的bootstrap系列小部件中alert小部件的使用教程及演示'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);

$html = [
    "markdown0" => <<<M0
# Alert警告框小部件的使用
通过按钮组容器可以把一组按钮放在同一行里，示例如下：
M0,
    "example0" => [
        "html" =>
            Alert::widget(['options' => ['class' => 'alert-success'], 'body' => 'Say hello...']) .
            Alert::widget(['options' => ['class' => 'alert-danger'], 'body' => 'Say hello...']) .
            Alert::widget(['options' => ['class' => 'alert-warning'], 'body' => 'Say hello...']) .
            Alert::widget(['options' => ['class' => 'alert-info'], 'body' => 'Say hello...'])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Alert;
echo Alert::widget([
    'options' => [
        'class' => 'alert-success'
    ],
    'body' => 'Say hello...'
]);
echo Alert::widget([
    'options' => [
        'class' => 'alert-danger'
    ],
    'body' => 'Say hello...'
]);
echo Alert::widget([
    'options' => [
        'class' => 'alert-warning'
    ],
    'body' => 'Say hello...'
]);
echo Alert::widget([
    'options' => [
        'class' => 'alert-info'
    ],
    'body' => 'Say hello...'
]);
EY0,
        "bootstrap" => <<<EB0
<div class="alert-success alert fade in">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    Say hello...
</div>
<div class="alert-danger alert fade in">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    Say hello...
</div>
<div class="alert-warning alert fade in">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    Say hello...
</div>
<div class="alert-info alert fade in">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    Say hello...
</div>
EB0
    ],
    "markdown1" => <<<M0
## 使用案例
一般我们会根据用户的操作来提示信息，而提示的内容一般会根据服务端的返回值来判断，因此常用的方式是在加载页面的时候创建`Alert`警告框html元素，
但是不会马上显示它，等到必要时再通过`js`使其显示相关内容。
M0,
    "example1" => [
        "html" =>
            \lvzmen\yii\cms\widgets\alert\MyAlert::widget([
                'options' => [
                    'class' => 'alert-success',
                    'id' => 'myalert'
                ],
                'closeButton' => false,
                'body' => "Save Success"
            ]) .
            Button::widget([
                "label" => "Show Alert",
                "options" => [
                    "class" => "btn btn-success",
                    "onclick" => "myAlert('myalert', 'show', 'First Show!');"
                ]
            ]) .
            Button::widget([
                "label" => "Hide Alert",
                "options" => [
                    "class" => "btn btn-success",
                    "style" => "margin-left:10px;",
                    "onclick" => "myAlert('myalert', 'hide');"
                ]
            ]) .
            Button::widget([
                "label" => "Hide After 3 Seconds",
                "options" => [
                    "class" => "btn btn-success",
                    "style" => "margin-left:10px;",
                    "onclick" => "myAlert('myalert', 'show', 'I will auto close after 3 seconds!', 3000);"
                ]
            ])
        ,
        "yii" => <<<EY1
use \lvzmen\yii\cms\widgets\alert\MyAlert;
use yii\bootstrap\Button;
echo MyAlert::widget([
    'options' => [
        'class' => 'alert-success',
        'id' => 'myalert'
    ],
    'closeButton' => false,
    'body' => "Save Success"
]);
echo Button::widget([
    "label" => "Show Alert",
    "options" => [
        "class" => "btn btn-success",
        "onclick" => "myAlert('myalert', 'show', 'First Show!');"
    ]
]);
echo Button::widget([
    "label" => "Hide Alert",
    "options" => [
        "class" => "btn btn-success",
        "style" => "margin-left:10px;",
        "onclick" => "myAlert('myalert', 'hide');"
    ]
]);
echo Button::widget([
    "label" => "Hide After 3 Seconds",
    "options" => [
        "class" => "btn btn-success",
        "style" => "margin-left:10px;",
        "onclick" => "myAlert('myalert', 'show', 'I will auto close after 3 seconds!', 3000);"
    ]
]);
EY1,
        "bootstrap" => <<<EB1

<div 
    id="myalert" 
    class="alert-success alert fade" 
    style="
        position: fixed; 
        top: 100px; 
        left: 20%; 
        right: 20%; 
        z-index: 1000;">
    <div id="myalert_body">
        Save Success
    </div>
</div>
<button 
    class="btn btn-success" 
    onclick="myAlert('myalert', 'show', 'First Show!');">
    Show Alert
</button>

<button 
    class="btn btn-success" 
    style="margin-left:10px;" 
    onclick="myAlert('myalert', 'hide');">
    Hide Alert
</button>

<button 
    class="btn btn-success" 
    style="margin-left:10px;" 
    onclick="myAlert('myalert', 'show', 'I will auto close after 3 seconds!', 3000);">
    Hide After 3 Seconds
</button>
EB1

    ],
    "markdown2" => <<<EM2
`MyAlert`是继承于`yii\bootstrap\Alert`的自定义类，主要是为了弥补父类的不足，有如下几个作用：  
- 去除`Alert`的`.in`类，因为这个类会让警告框在页面加载后立刻显示出来；
- 给`body`属性添加一个`div`容器，使得我们可以用`js`来动态填充警告信息；
- 注册一个`myAlert()`函数，便于我们对警告框的调用。

`MyAlert`类源码如下：
```php
<?php

namespace lvzmen\yii\cms\widgets\alert;

use Yii;
use yii\base\Widget;
use yii\bootstrap\Alert;
use yii\bootstrap\Html;
use yii\web\View;

class MyAlert extends Alert
{

    public function init()
    {
        parent::init(); // TODO: Change the autogenerated stub

        \$this->setId(\$this->options["id"] ?: "alert" . uniqid());
        \$this->body = "<div id='{\$this->getId(false)}_body'>" . \$this->body . "</div>";
        
        
        //delete to cancel button to avoid html be <delete></delete>
        \$this->closeButton = empty(\$this->closeButton) ? false : \$this->closeButton;
    }

    protected function initOptions()
    {
        //remove the 'in' class to avoid display alert when page load
        Html::addCssClass(\$this->options, ['alert', 'fade']);

        //show the alert in the middle of page
        Html::addCssStyle(\$this->options, ['position' => 'fixed', 'top' => '100px', 'left' => '20%', 'right' => '20%', 'z-index' => 1000]);

        //register the js
        \$js = <<<JS
function myAlert(id, action = 'show', message = '', duration = 0){
    if(action == 'show') {
        \$('#' + id + '_body').html(message);   
        \$('#' + id).addClass("in");
    } else {
        \$('#' + id).removeClass("in");
    }
    if(duration != 0) {
        setTimeout(function(){
            \$('#' + id).removeClass("in");
        }, duration);
    }
}
JS;
        \$this->getView()->registerJs(\$js, View::POS_HEAD, 'myalert_js');


        if (\$this->closeButton !== false) {
            \$this->closeButton = array_merge([
                'data-dismiss' => 'alert',
                'aria-hidden' => 'true',
                'class' => 'close',
            ], \$this->closeButton);
        }


    }


}

```
EM2
    ,
    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210915144634.png)
### 属性
- `body`: string  
警告框的提示信息。
```php
echo Alert::widget([
    'options' => [
        'class' => 'alert-info',
    ],
    'body' => 'Say hello...',
]);
```
- `closeButton`: array/false  
这个标签用于定制关闭按钮，当设置为`false`的时候不显示右侧关闭按钮，否则需要传入一个数组，用于定制关闭按钮的样式：  
```php
Alert::widget([
    'options' => ['class' => 'alert-info'], 
    'body' => 'Say hello...', 
    'closeButton' => ['tag' => 'button', 'label' => 'click me']
]);
```
M3



];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}